<!DOCTYPE html>
<html>
<head>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-tree.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-combobox.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-tree.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-combobox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/data.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/user.js"></script>
<style type="text/css">
/*
.btn-default{
    text-align:left;
    position: relative;
}

.bootstrap-combobox .caret{  
  margin: auto;
  position: absolute;
  top: 0px; bottom: 0px; right:10px;
}

.bootstrap-combobox .combobox-body{  
  position: absolute;
  width:100%;
  height:100px;
  max-height: 500px; 
  border:1px solid;
  background:white;
  resize: both;
  overflow: auto;
  z-index:1;
}


.bootstrap-combobox .combobox-icon{  
  position: absolute;
  top: 0px;
  line-height: 32px;   
}

.combobox-icon-remove{  
  right: 25px; 
}

.combobox-icon-down{  
  right: 5px;  
}

.bootstrap-combobox .combobox-caret1{
width: 0px;
height: 0px;
border-top: 5px solid #000;
border-right: 5px solid #ff0000;
border-left: 5px solid #ff0000;
border-bottom: 5px solid #000;
  margin: auto;
  position: absolute;
  top: 0px; bottom: 0px; right:0px; left: 0px;
  
}

*/
</style>
<script type="text/javascript">
$(function () {
	$("#simpleCombobox1").BootstrapCombobox({
		data: [
		       {value: 10000, text: "测试1"},
		       {value: 20000, text: "测试2"},
		       {value: 30000, text: "测试3"},
		    ]
	});
	
	$("#simpleCombobox2").BootstrapCombobox({
		data: [
		       {value: 40000, text: "测试4"},
		       {value: 50000, text: "测试5"},
		       {value: 60000, text: "测试6"},
		       {value: 70000, text: "测试7"},
		       {value: 80000, text: "测试8"},
		    ]
	});	

	$("#tableCombobox").BootstrapCombobox({
		editor: {
			type: 'table',
			options:{
				columns: [
							{display : '登录名', name: 'loginName'},
							{display : '姓名', name: 'userName'},
							{display : '电话', name: 'userPhone'},
							{display : '移动电话', name: 'userMPhome'},
							{display : '电子邮箱', name: 'userEmail'},
						],		
				onSelectRow	:function(data){
					$("#tableCombobox").BootstrapCombobox('selectItem',data.loginName,data.userName);
				},
				data: user,
				pageSize: 5,
				usePager: true
		    }
		}
	});	
	
	$("#treeCombobox").BootstrapCombobox({
		editor: {
			type: 'tree',
			options:{
		    	expand: false,
				data: treeData1.toTree('id','pid'),
				onLeafClick: function(data){
					$("#treeCombobox").BootstrapCombobox('selectItem',data.id,data.text);
				}
		    }
		}
	});
	

	
});



</script>
</head>

<body>  
	<div class="container">  
		<nav id="menu"></nav>
		
		<div class="panel panel-default">
	        <div class="panel-heading">简单下拉框</div>
			<div class="panel-body">
			    <div class="row">
			        <div class="col-xs-3">
			            <div id="simpleCombobox1"></div>			        
			        </div>			    
			        <div class="col-xs-3">
			            <div id="simpleCombobox2"></div>			            
			        </div>
			    </div>
		     </div>
		     <div class="panel-footer">
			     简单下拉框使用说明：                                                                                                                                                      </br>
				$("#simpleCombobox1").BootstrapCombobox({             </br>
					data: [                                          </br>
					       {value: 10000, text: "测试1"},                </br>
					       {value: 20000, text: "测试2"},              </br>
					       {value: 30000, text: "测试3"},              </br>
					    ]                                              </br>
				});	                                                    </br>
				data为一个json数组，下拉框的展示选项	                            </br>    
		     </div>	
	    </div>

		<div class="panel panel-default">
	        <div class="panel-heading">表格下拉框</div>
			<div class="panel-body">
			    <div class="row">			    
			        <div class="col-xs-6">
			            <div id="tableCombobox"></div>			            
			        </div>
			    </div>
		     </div>
		     <div class="panel-footer">
		                           表格下拉框使用说明：                                                                                                                                                              </br>
				$("#tableCombobox").BootstrapCombobox({                               </br>
					editor: {                                                         </br>
						type: 'table',                                                 </br>
						options:{                                                       </br>
							columns: [                                                 </br>
										{display : '登录名', name: 'loginName'},            </br>
										{display : '姓名', name: 'userName'},               </br>
										{display : '电话', name: 'userPhone'},              </br>
										{display : '移动电话', name: 'userMPhome'},             </br>
										{display : '电子邮箱', name: 'userEmail'},                </br>
									],		                                                  </br>
							onSelectRow	:function(data){                                       </br>
								$("#tableCombobox").BootstrapCombobox('selectItem',data.loginName,data.userName);    </br>
							},                                                                                       </br>
							data: user,                                                                               </br>
							pageSize: 5,                                                                              </br>
							usePager: true                                                                             </br>
					    }                                                                                              </br>
					}                                                                                                 </br>
				});	                                                                                                   </br>	     
		                            下拉框集成表格控件需要定义editor属性，并且将其type属性定义为table，options属性为表格控件的标准属性                                                                                                                 </br>
		                            一般的操作习惯是点击表格的行来进行选择，因此需要为表格设计onSelectRow事件                                                                                                                                                                                            </br>
		                            触发该事件的时候调用BootstrapCombobox的selectItem方法进行值的回填                                                                                                                                                                                          </br>
			 </div>	
		</div>

		<div class="panel panel-default">
	        <div class="panel-heading">树形下拉框</div>
			<div class="panel-body">
			    <div class="row">			    
			        <div class="col-xs-4">
			            <div id="treeCombobox"></div>			            
			        </div>
			    </div>
		     </div>
		     <div class="panel-footer">
		                   树形下拉框使用说明：                                                                                                                                                              </br>
				$("#treeCombobox").BootstrapCombobox({                                                        </br>
					editor: {                                                                                </br>
						type: 'tree',                                                                            </br>
						options:{                                                                               </br>
					    	expand: false,                                                                    </br>
							data: treeData1.toTree('id','pid'),                                                 </br>
							onLeafClick: function(data){                                                       </br>
								$("#treeCombobox").BootstrapCombobox('selectItem',data.id,data.text);           </br>
							}                                                                                    </br>
					    }                                                                                        </br>
					}                                                                                            </br>
				});                                                                                                </br>
				下拉框集成表格控件需要定义editor属性，并且将其type属性定义为tree，options属性为树控件的标准属性                                                                                                                 </br>
		                            一般的操作习惯是点击树节点来进行选择，因此需要为树设计onLeafClick事件                                                                                                                                                                                            </br>
		                            触发该事件的时候调用BootstrapCombobox的selectItem方法进行值的回填                                                                                                                                                                                </br>		                   
			 </div>	
		</div>

		
    </div>
</body>

</html>